import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { inject, observer } from 'mobx-react'

import {
  Avatar,
  withStyles,
} from '@material-ui/core'

import UserIcon from '@material-ui/icons/AccountCircle'
import Container from '../layout/container'
import userStyle from './styles/user-style'

@inject(stores => (
  {
    appState: stores.appState,
  }
)) @observer
class User extends Component {
  componentDidMount() {
    //do someting here
  }

  render() {
    const { classes } = this.props
    const { info } = this.props.appState.user

    return (
      <Container>
        <div className={classes.avatar}>
          <div className={classes.bg} />
          {
            info.avatar_url ? <Avatar className={classes.avatarImg} src={info.avatar_url} /> : (
              <Avatar className={classes.avatarImg}>
                <UserIcon />
              </Avatar>
            )
          }
          <span className={classes.userName}>{info.loginname || '未登录'}</span>
        </div>
        {this.props.children}
      </Container>
    )
  }
}

User.wrappedComponent.propTypes = {
  appState: PropTypes.object.isRequired,
}

User.propTypes = {
  classes: PropTypes.object.isRequired,
  children: PropTypes.element.isRequired,
}

export default withStyles(userStyle)(User)
